//无缝轮播实现套路
//1.相对定位+绝对定位
//2.通过操作两个绝对元素的横坐标位移，实现一次轮播特效。
//3.一次轮播结束后，将左元素移到右边。（跳完绳到后面排队）
//注：on('transitionend')事件有一个坑，就是每次监听对象的属性变更都会触发这个事件，解决方法是不用on用one（一次性用）
//4.将轮播归结为3个状态current,leave和enter，用状态机实现效果
//要有把事件变成状态机的理念
let n
let cnt
init()
setInterval(() => {
    makeLeave(getImage(n))
    .one('transitionend', (e) => {
            makeEnter($(e.currentTarget))
        })
    makeCurrent(getImage(n+1))
    n += 1
}, 3000)



















function getImage(n){
    return $(`.images > img:nth-child(${x(n)})`)
}

function x(n) {
    if (n > cnt) {
        n = n % cnt
        if (n === 0) {
            n = cnt
        }
    }
    return n
}

function init() {
    n = 1
    cnt = 5
    $('.images > img:nth-child(1)').addClass('current')
        .siblings().addClass('enter')
}

function makeCurrent($node) {
    return $node.removeClass('enter leave').addClass('current') 
}

function makeLeave($node) {
    return $node.removeClass('enter current').addClass('leave')
}

function makeEnter($node) {
    return $node.removeClass('leave current').addClass('enter')
}